<template>
  <div class="content" style="background: #fff;padding: 30px;" :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="search" @click="addfreightListsForm()">添加</a-button>
    </div>
    <a-table
      :columns="freightFormworkColumns"
      :dataSource="freightLists"
      rowKey="id"
      :pagination="false"
    >
      <span slot="freightTemplateDO.deliveryDeadline" slot-scope="text">{{ text }}天</span>
      <span slot="freightTemplateDO.defaultFreePrice" slot-scope="text">
        <span v-if="text === 0">包邮</span>
        <span v-if="text > 0">满{{ text / 100.0 }}元包邮</span>
        <span v-if="text < 0">不包邮</span>
      </span>
      <span slot="freightTemplateDO.defaultFirstNum" slot-scope="text">{{ text }}件</span>
      <span slot="freightTemplateDO.defaultFirstMoney" slot-scope="text">{{ text / 100.0 }}元</span>
      <span slot="freightTemplateDO.defaultContinueNum" slot-scope="text">{{ text }}件</span>
      <span slot="freightTemplateDO.defaultContinueMoney" slot-scope="text">{{ text / 100.0 }}元</span>
      
      
      <span slot="use" slot-scope="text, record" class="">
        <a-button type="primary"  class="flyray-btn"
        @click="editForm(record)"
       >修改</a-button>

        <a-button type="danger"
        class="table-danger flyray-btn" @click="deleteRow(record)"
        >删除</a-button>
      </span>
    </a-table>
    <!-- //添加 -->
    <a-modal
      :title="title"
      v-model="visible"
      wrapClassName="mymodel"
      :footer="null"
      destroyOnClose
      width="62%"
    >
      <a-form @submit="event ? handleSubmit($event) :handleSubmitEdit($event)" :form="form1">
        <a-form-item
          label="模板名称"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            v-decorator="['templateName',event ? { initialValue: freightTemplateDO.templateName} : { rules: [{ required: true, message: '模板名称不能为空' }] }]"
            name="templateName"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="发货地址"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input allowClear name="spuLocation" autocomplete="off" v-decorator="['spuLocation',event ? { initialValue: freightTemplateDO.spuLocation }:{}]" />
        </a-form-item>
        <a-form-item
          label="发货期限"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="天"
            v-decorator="['deliveryDeadline',event?{
                initialValue: freightTemplateDO.deliveryDeadline,
                rules: [{ required: true, message: '发货期限不能为空' }]
              }: { rules: [{ required: true, message: '发货期限不能为空' }] }]"
            name="deliveryDeadline"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="是否包邮"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-radio-group v-model="value">
            <a-radio :value="-1">坚决不包邮</a-radio>
            <a-radio :value="0">卖家承担包邮</a-radio>
            <a-radio :value="1">设定满额包邮</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="默认包邮额度"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
          v-if="value === 1"
        >
          <a-input
            allowClear
            addonAfter="天"
            placeholder="默认包邮额度"
            v-decorator="['defaultFreePrice',event ? {
                initialValue: freightTemplateDO.defaultFreePrice / 100.0,
                rules: [{ required: true, message: '包邮门栏额度不能为空' }]
              }: { rules: [{ required: true, message: '包邮门栏额度不能为空' }] }]"
            name="defaultFreePrice"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="计费首次数量"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="件"
            v-decorator="['defaultFirstNum',event ? {
                initialValue: freightTemplateDO.defaultFirstNum,
                rules: [{ required: true, message: '首次计费数量不能为空' }]
              }: { rules: [{ required: true, message: '首次计费数量不能为空' }] }]"
            name="defaultFirstNum"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="计费首次价格"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="元"
            v-decorator="['defaultFirstPrice',event ? {
                initialValue: freightTemplateDO.defaultFirstMoney / 100.0,
                rules: [{ required: true, message: '首次计费价格不能为空' }]
              } : { rules: [{ required: true, message: '首次计费价格不能为空' }] }]"
            name="defaultFirstPrice"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="计费续件数量"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="件"
            v-decorator="['defaultContinueNum',event ? {
                initialValue: freightTemplateDO.defaultContinueNum,
                rules: [{ required: true, message: '续件计费数量不能为空' }]
              } : { rules: [{ required: true, message: '续件计费数量不能为空' }] }]"
            name="defaultContinueNum"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="计费续件价格"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="元"
            v-decorator="['defaultContinuePrice',event ? {
                initialValue: freightTemplateDO.defaultContinueMoney / 100.0,
                rules: [{ required: true, message: '续件计费价格不能为空' }]
              }: { rules: [{ required: true, message: '续件计费价格不能为空' }] }]"
            name="defaultContinuePrice"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="指定地区价格"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-button type="primary" class="add-button" @click="visible1 = true">添加</a-button>
        </a-form-item>
        <a-table
          :columns="addColumns"
          :dataSource="addDatas"
          class="add-table"
          rowKey="id"
          :pagination="false"
        >
          <span slot="action" slot-scope="record,index">
            <template>
              <a-button type="danger" class="table-danger" @click="delAdd(record,index)">删除</a-button>
            </template>
          </span>

          <span slot="firstMoney" slot-scope="text">{{text/100.0}}</span>
          <span slot="continueMoney" slot-scope="text">{{text/100.0}}</span>
          <span slot="freePrice" slot-scope="text">{{text/100.0}}</span>
        </a-table>
        <div class="mybutton">
          <a-button class="cancelMymodel" @click="visible = false">取消</a-button>
          <a-button html-type="submit" type="primary">确定</a-button>
        </div>
      </a-form>
    </a-modal>
    <!-- 指定地区 -->
    <a-modal
      title="添加指定地区"
      v-model="visible1"
      class="weight"
      width="700px"
      wrapClassName="mymodel mymodel-two"
      :footer="null"
      destroyOnClose
    >
      <a-form @submit="add" :form="form">
        <a-form-item
          label="包邮门栏"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="天"
            v-decorator="['freePrice', { rules: [{ required: true, message: '包邮门栏额度不能为空' }] }]"
            name="freePrice"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="首次数量"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="件"
            v-decorator="['firstNum', { rules: [{ required: true, message: '首次计费数量不能为空' }] }]"
            name="firstNum"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="首次价格"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="元"
            v-decorator="['firstMoney', { rules: [{ required: true, message: '首次计费价格不能为空' }] }]"
            name="firstMoney"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="续件数量"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="件"
            v-decorator="['continueNum', { rules: [{ required: true, message: '续件计费数量不能为空' }] }]"
            name="continueNum"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="续件价格"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            addonAfter="元"
            v-decorator="['continueMoney', { rules: [{ required: true, message: '续件计费价格不能为空' }] }]"
            name="continueMoney"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item
          label="指定地区"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
        >
          <a-checkbox-group
            name="designatedArea"
            v-decorator="['designatedArea', {rules: [{ required: true, message: '至少选择一个地区' }] }]"
            :options="plainOptions"
          ></a-checkbox-group>
        </a-form-item>
        <div class="mybutton">
          <a-button class="cancelMymodel" @click="visible1 = false">取消</a-button>
          <a-button html-type="submit" type="primary">确定</a-button>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { getAllFreightTemplate, addFreightTemplate,updateFreightTemplate,deleteFreightTemplate } from '@/api/mall/freightFormwork'
import { freightFormworkColumns,addColumns,plainOptions } from '@/const/crud/mall/freightFormwork.config'

export default {
  name: 'freightFormwork',
  data() {
    return {
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      formEdit: this.$form.createForm(this),
      freightFormworkColumns,
      plainOptions,
      addColumns,
      value: 1,
      addDatas: [],
      freightLists: [],
      visible: false,
      visible1: false,
      visible2: false,
      freightTemplateDO: {},
      freightTemplateCarriageDOList: [],
      // 控制弹框标题
      title:'',
      // 控制弹框的提交事件
      event:true
    }
  },
  methods: {
    // 点击添加  显示模态框 
    addfreightListsForm() {
      this.visible = true
      this.addDatas = [],
      this.title = "添加"
      // console.log(this.freightLists)
      this.event= false
      
    },
    delAdd(val, idx) {
      var _this = this
      this.$confirm({
        title: '提示',
        content: '此操作将删除该指定地区, 是否继续?',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          _this.addDatas.splice(idx, 1)
        }
      })
    },
    add(e) {
      e.preventDefault()
      this.form.validateFields().then(values => {
        this.visible1 = false
        // console.log(values)
        this.addDatas.push(values)
        this.freightTemplateCarriageDOList = [
          {
            freePrice: values.freePrice,
            firstNum: values.firstNum,
            firstMoney: values.firstMoney,
            continueNum: values.continueNum,
            continueMoney: values.continueMoney,
            designatedArea: values.designatedArea.toString()
          }
        ]
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form1.resetFields()
      this.form1.validateFields().then(values => {
        this.visible = false
        let params = {
          'templateName': values.templateName,
          'deliveryDeadline': values.deliveryDeadline,
          'defaultFirstNum': values.defaultFirstNum,
          'defaultFirstPrice': values.defaultFirstPrice,
          'defaultContinueNum': values.defaultContinueNum,
          'defaultContinuePrice': values.defaultContinuePrice,
          'defaultFreePrice': values.defaultFreePrice || this.value,
          'spuLocation': values.spuLocation,
          'freightTemplateCarriageDOList': JSON.stringify(this.freightTemplateCarriageDOList) 
        }

        addFreightTemplate(Object.assign(params)).then(res=>{
          this.getfreightLists()
        })
        
      })
    },
    getfreightLists() {
      getAllFreightTemplate().then(res => {
        this.freightLists = res.data
      })
    },
    // 修改信息  模态框
    editForm(val) {
      this.visible = true
      this.title = "编辑"
      this.event = true
      this.freightTemplateDO = val.freightTemplateDO
      this.freightTemplateCarriageDOList = val.freightTemplateCarriageDOList
      this.addDatas = this.freightTemplateCarriageDOList
      if (val.freightTemplateDO.defaultFreePrice == 0) {
        this.value = 0
        val.freightTemplateDO.defaultFreePrice = 0
      } else if (val.freightTemplateDO.defaultFreePrice < 0) {
        this.value = -1
        val.freightTemplateDO.defaultFreePrice = -100
      } else {
        this.value = 1
      }
    },
    handleSubmitEdit(e) {
      e.preventDefault()
      this.form1.validateFields().then(values => {  
         this.visible = false     
        let params = {
          'templateId': this.freightTemplateDO.id,
          'templateName': values.templateNameEdit,
          'deliveryDeadline': values.deliveryDeadlineEdit,
          'defaultFirstNum': values.defaultFirstNumEdit,
          'defaultFirstPrice': values.defaultFirstMoneyEdit ,
          'defaultContinueNum': values.defaultContinueNumEdit,
          'defaultContinuePrice': values.defaultContinueMoneyEdit,
          'defaultFreePrice': this.value >= 1 ? values.defaultFreePriceEdit : this.value == 0 ? 0 : -100.0,
          'spuLocation': values.spuLocationEdit,
          'isFree': this.value,
          'freightTemplateCarriageDOList': JSON.stringify(this.freightTemplateCarriageDOList) || []
        }        
         updateFreightTemplate(Object.assign(params)).then(res=>{
          this.getfreightLists()
        })
        
        
      })
    },
    //删除
    deleteRow(val) {
      // console.log(val)
      var _this = this
      this.$confirm({
        title: '提示',
        content: `此操作将永久删除该运费模板--- ${val.freightTemplateDO.templateName} ---,是否继续?`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          let params = {
            'templateId':val.freightTemplateDO.id,
          }          
          deleteFreightTemplate(Object.assign(params)).then(res=>{
            _this.getfreightLists()
          })
        }
      })
    }
  },
  created() {
    this.getfreightLists()
  }
}
</script>
<style lang="less" scoped>
.weight{
  position: absolute;
  z-index: 1111;
}
.flyray-btn{
  font-size:12px;padding:0 7px;margin:0 0 0 3px;height:24px;
}
.table-danger,
.table-danger:focus {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  margin-left: 5px;
}
.mymodel {
  .ant-modal {
    top: 0;
    padding: 0;
    .ant-modal-content {
      .ant-form-item-label {
        margin-right: 80px;
        label {
          font-weight: 700;
          color: #606366;
          width: 150px;
          &::after {
            content: '';
          }
        }
      }
      .ant-input {
        height: 36px;
      }
      .has-error .ant-form-explain {
        color: #f56c6c;
        font-size: 13px;
        line-height: 1;
        padding-top: 4px;
      }
      label.ant-radio-wrapper-checked {
        span {
          color: #1890ff;
        }
      }
    }
    .ant-modal-header {
      border-bottom: none;
      .ant-modal-title {
        font-size: 18px;
      }
    }
    .ant-modal-body {
      padding-bottom: 90px;
    }
    .ant-modal-footer {
      padding: 0 16px;
      border: none;
    }
    .add-table {
      thead {
        th {
          padding: 20px 0px;
          color: #909399;
          font-weight: 700;
          background-color: #fff;
          div {
            padding-left: 10px;
          }
        }
      }
      .ant-empty-normal {
        margin: 0;
        .ant-empty-image {
          display: none;
        }
      }
    }
    .mybutton {
      text-align: right;
      bottom: 30px;
      right: 0px;
      margin-top: 20px;
    }
    .cancelMymodel {
      margin-right: 10px;
    }
  }
}
.mymodel-two {
  z-index: 1001;
  .ant-modal {
    top: 30px;
    .ant-modal-content {
      height: 858px !important;
      .ant-form-item-label {
        margin-right: 30px;
      }
    }
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
  .ant-checkbox-wrapper {
    height: 42px;
    line-height: 42px;
    margin-right: 20px;
    user-select: none;
  }
}
.ant-modal-confirm {
  top: 35%;
}
</style>
